

<div class="layui-form" id="form" lay-filter="agent_edit" >
	<div class="form-cont">

		<div class="layui-form-item verify">
		  <label class="layui-form-label">标题</label>
		  <div class="layui-input-block">
<!-- 			  <input type="text" v-model="detail.title" verify="require|title" placeholder="请输入标题" class="layui-input">
			  <span class="hint">标题必填</span> -->
			  
			  <input type="text" v-model="detail.title" placeholder="请输入标题" class="layui-input">
			  <span class="hint">标题必填</span>
			</div>
		</div>


		<div class="layui-form-item verify">
		  <label class="layui-form-label">轮播图</label>
		  <div class="layui-input-block">
			  <button type="button" class="layui-btn" id="upload" v-show="!photo">
			    <i class="layui-icon">&#xe67c;</i>上传图片
			  </button>
			  <div class="flex img-box" v-if="photo">
				  <span @click="photo=''">x</span>
			  	<img :src="photo">
			  </div>
			  <input type="hidden" verify="require" v-model="photo"/>
			  <span class="hint" v-if="!photo">轮播图必传</span>
		  </div>
		</div>
		
		<div class="layui-form-item verify">
		  <label class="layui-form-label">链接</label>
		  <div class="layui-input-block">
			  <input type="text" v-model="detail.url" placeholder="请输入链接" class="layui-input">
			</div>
		</div>
		
		<div class="layui-form-item verify">
		  <label class="layui-form-label">状态</label>
		  <div class="layui-input-block">
		      <div class="layui-unselect layui-form-switch" :class="{'layui-form-onswitch':detail.status==1}" lay-skin="_switch" @click="radioF()"><em>{{detail.status==1?'启用':'停用'}}</em><i></i></div>
		  </div>
		</div>
	</div>
	  <div class="form-btn" v-if="type!=3">
	      <input type="button" value="保存" class="layui-btn" @click="submit">
	  </div>
</div>
<style type="text/css">
	.img-box{
		width: 60px;
		height: 60px;
		border: 1px solid #eee;
		position: relative;
	}
	.img-box img{
		max-width: 100%;
		max-height: 100%;
	}
	.img-box span{
		position: absolute;
		width: 15px;
		line-height: 15px;
		text-align: center;
		font-family: arial;
		top: -8px;
		right: -8px;
		border-radius: 50%;
		background: rgba(0,0,0,.5);
		color:#fff;
		font-size: 12px;
		cursor: pointer;
	}
	.form-cont{
		overflow: auto;
	}
</style>
<script>
	layui.use(['form','upload','layer'], function(){
	  var $ = layui.$
	  ,form = layui.form,upload=layui.upload, layer = layui.layer;
	  form.verify(layui.admin.verify);
	  var forms=new Vue({
	  		el:'#form',
	  		data:{
	  			role:[],
				group:[],
				type:layui.admin.objData.type,
				detail:{
					status:1,
					photo:'',
					url:''
				},
				photo:'',
				old_detail:{},
				title:'',
				url:'',
				upload:'',
				layer:'',
				photos:false
	  		},
	  		mounted() {
				var _this=this;
				//初始化
	  			if(this.type!=1) this.detail=layui.admin.objData.detail,this.old_detail=JSON.stringify(layui.admin.objData.detail),this.photo=this.detail.photo;
				layui.admin.agent=this.detail;
				if(this.detail.city){
					this.cityF({pid:this.detail.province});
					if(this.detail.county){
						this.cityF({pid:this.detail.city},1);
					}
				}
				/* this.cityF({}); */

				console.log(this.detail)
				//图片上传
			      this.upload=upload.render({
				    elem: '#upload' ,//绑定元素
					field:'image',
					accept:'images',
					data:{type:3},
					auto:false,
				    url: layui.conf.ajaxUrl+'login/upload_img'
					//,data:{module:'notice',folder:'/cat/logo'}
					,choose: function(obj){
					    obj.preview(function(index, file, result){
						  _this.photo=result;
						  _this.photos=true;
					    });
					  }
				    ,done: function(res){
					  _this.detail.card_photo=res.data.img_url;
					  layer.close(_this.layer);
					  _this.submits();
				    }
				    ,error: function(){}
				  });
	  		},
	  		methods:{
	  			radioF:function(){//radio选择
	  				this.detail.status==1?this.detail.status=2:this.detail.status=1;
	  			},
				submit:function(){
					if(layui.admin.form('#form')){
						if(this.photos){
							this.layer=layer.load(1);
							this.upload.upload();
						}else{
							this.submits();
						}
					}
				},
				submits:function(){
					if(this.type==2){   //编辑
						var data=layui.admin.filter(this.detail,JSON.parse(this.old_detail),'id');
						console.log(data)
						if(data){
							layui.admin.formapi('banna/update',data);
						}
					}else{  //添加
					console.log(this.detail)
						layui.admin.formapi('banna/add',this.detail);
					}
				}
	  		}
	  	})
	});
</script>
